<div class="layui-fluid indexMain" id="VIEW-index" lay-title="首页">
  <div class="nepadmin-pad-tb20">
    <h1 class="nepadmin-lead">后台管理系统</h1>
    <!-- <div class="nepadmin-ignore nepadmin-pad-tb10">
      <p>遵循原生 HTML/CSS/JS 的书写与组织形式，上手容易，拿来即用。</p>
      <p>nepadmin 最低兼容到IE8浏览器。</p>
    </div> -->
  </div>
  <div class="layui-row layui-col-space15">
    <div class="layui-col-lg12">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-sm3">
          <div class="nepadmin-linecard">
            <p class="nepadmin-linecard-title">总客户数</p>
            <span class="nepadmin-linecard-text user_sum"></span>
            <span class="nepadmin-ignore">人</span>
          </div>
        </div>
        <div class="layui-col-sm3">
          <div class="nepadmin-linecard nepadmin-br-green">
            <p class="nepadmin-linecard-title">今日新增客户</p>
            <span class="nepadmin-linecard-text user_new"></span>
            <span class="nepadmin-ignore">人</span>
          </div>
        </div>
        <div class="layui-col-sm3">
          <div class="nepadmin-linecard nepadmin-br-red">
            <p class="nepadmin-linecard-title">
              田间服务信息总数
            </p>
            <span class="nepadmin-linecard-text serve_sum"></span>
            <span class="nepadmin-ignore">条</span>
          </div>
        </div>
        <div class="layui-col-sm3">
          <div class="nepadmin-linecard nepadmin-br-orange">
            <p class="nepadmin-linecard-title">
              新增田间服务信息
            </p>
            <span class="nepadmin-linecard-text serve_new"></span>
            <span class="nepadmin-ignore">条</span>
          </div>
        </div>
        <div class="layui-col-xs12">
          <div class="layui-row layui-col-space15">
            <div class="layui-col-xs12">
              <div class="layui-card">
                <!-- <div class="layui-card-extra nepadmin-c-gray">
                  <span class="nepadmin-c-blue">今日</span>&nbsp;&nbsp;
                  <span>本周</span>&nbsp;&nbsp; <span>本月</span>&nbsp;&nbsp;
                  <span>全年</span>&nbsp;&nbsp;
                </div> -->
                <div class="layui-tab layui-tab-brief" lay-filter="index-chart">
                  <ul class="layui-tab-title indexTrend">
                    <!-- <li class="layui-this">2019年</li>
                    <li>2018年</li>
                    <li>2017年</li> -->
                  </ul>
                  <div class="layui-tab-content" style="padding:0;">
                    <div class="layui-tab-item layui-show">
                      <div
                        id="index-echartLine"
                        style="width: 100%;height:400px;"
                      ></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script type="text/html" id="TPL-index-params">
    {{# layui.each(d.params,function(i,item){ }}
    <span class="layui-badge-rim">{{ item.val }}</span>
    {{# }) }}
  </script>
  <script type="text/html" id="TPL-index-status">
    {{#
        var status = {
            WAIT_PAY:{title:'待付款',color:'blue'},
            WAIT_DELIVER:{title:'待发货',color:'orange'},
            WAIT_REFUND:{title:'待退款',color:'red'},
        }[d.status];
    }}
    <span class="layui-badge layui-bg-{{status.color}}">{{ status.title }}</span>
  </script>
</div>
<script>
  layui.use(
    ['admin', 'echarts', 'element', 'helper', 'table', 'util'],
    function (admin, echarts, element, helper, table, util) {
      var $ = layui.jquery
      var view = $('#VIEW-chart-index')
      element.render('progress')
	  
	  $.ajax({
	      url: apiUrl + '/index.php/agricultural/Index/index?token=' + JSON.parse(window.sessionStorage.getItem('agricultural')).token,
	  	  type: 'POST',
	      success:function(res){
	  		console.log(res)
	  		if(res.code == 0){
				$.each(res.data,function(k,v){
					$('.' + k).text(v)
				})
	  		}else if(res.code == 2){
	  			tokenExpired()
	  		}else{
	  			layer.msg(res.msg)
	  		}
	          
	      },
	      complete:function(){
	          //loading.hide();
	      }
	  });
	  
	  $.ajax({
	    url: apiUrl + '/index.php/agricultural/index/trend?token=' + JSON.parse(window.sessionStorage.getItem('agricultural')).token,
	  	type: 'POST',
	      success:function(res){
	  		if(res.code == 0){
				var indexTrendHtml = ''
	  			$.each(res.data,function(k,v){
					if(k == '0'){
						indexTrendHtml += '<li class="layui-this">' + v.new_year + '</li>'
					}else{
						indexTrendHtml += '<li>' + v.new_year + '</li>'
					}
	  			})
				$('.indexTrend').html(indexTrendHtml)
	  		}else if(res.code == 2){
	  			tokenExpired()
	  		}else{
	  			layer.msg(res.msg)
	  		} 
	      },
	      complete:function(){
	          //loading.hide();
	      }
	  });

	  
      getIndexData()
	  

      element.on('tab(index-chart)', function (data) {
        getIndexData($(this).text())
      })
	  
	  function getIndexData(NowYear){
		  $.ajax({
		    url: apiUrl + '/index.php/agricultural/index/trend?token=' + JSON.parse(window.sessionStorage.getItem('agricultural')).token,
		  	type: 'POST',
		      success:function(res){
		  		if(res.code == 0){
		  			$.each(res.data,function(k,v){
						if(NowYear){
							if(v.new_year == NowYear){
								delete v.new_year
								createChart(v)
							}
						}else{
							if(k == '0'){
								delete v.new_year
								createChart(v)
							}
						}
		  			})
		  		}else if(res.code == 2){
		  			tokenExpired()
		  		}else{
		  			layer.msg(res.msg)
		  		}
		          
		      },
		      complete:function(){
		          //loading.hide();
		      }
		  });
	  }

      function createChart(monthData) {
		var seriesData = []
		var xAxisData = []
        for (var i = 1; i <= 12; i++) {
          seriesData.push(monthData['month' + i])
          xAxisData.push(i+'月')
        }
        var option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'cross' }
          },
          xAxis: {
            type: 'category',
            data: xAxisData
          },
          yAxis: {
            max: function (val) {
              return val.max
            },
            min: function (val) {
              return val.min
            },
            type: 'value',
            axisLabel: { formatter: '{value}条' },
            axisPointer: { snap: true }
          },
          series: [
            {
              name: '时段销售额',
              type: 'line',
              symbolSize: 12,
              lineStyle: {
                normal: {
                  width: 5,
                  shadowColor: '#5a8bff',
                  shadowBlur: 40,
                  shadowOffsetY: 10
                }
              },
              data: seriesData
            }
          ]
        }
        echarts
          .init(document.getElementById('index-echartLine'), 'blue')
          .setOption(option)
      }
    }
  )
  
</script>

<style type="text/css">
	.indexMain .layui-col-space15>*{
		padding: 7.5px;
	}
</style>
